<template>
  <div class="app-container">
    <!-- 步骤导航 -->
    <el-row :gutter="20">
      <el-steps :active="active" finish-status="success" style="margin-bottom: 30px;">
        <el-step title="基本信息" icon="el-icon-edit"></el-step>
        <el-step title="规格参数" icon="el-icon-s-tools"></el-step>
        <el-step title="销售属性" icon="el-icon-attract"></el-step>
        <el-step title="SKU信息"  icon="el-icon-pie-chart"></el-step>
        <el-step title="保存完成" icon="el-icon-trophy-1"></el-step>
      </el-steps>
    </el-row>

    <!-- 步骤内容区域 -->
    <el-row :gutter="20">
      <!-- 步骤1：基本信息 -->
      <div v-if="active === 0">
        <el-form 
          :model="form" 
          label-width="120px"
          :rules="rules"
          ref="formRef"
        >
          <el-form-item label="商品名称" prop="goodsName">
            <el-input v-model="form.goodsName" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          
          <el-form-item label="商品描述" prop="goodsDesc">
            <el-input v-model="form.goodsDesc" placeholder="请输入商品描述"></el-input>
          </el-form-item>
          
          <el-form-item label="选择分类" prop="category">
            <el-select v-model="form.category" placeholder="请选择商品分类">
              <el-option
                v-for="item in categories"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="选择品牌" prop="brand">
            <el-select v-model="form.brand" placeholder="请选择商品品牌">
              <el-option
                v-for="item in brands"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="商品重量(Kg)" prop="weight">
            <el-input-number 
              v-model="form.weight" 
              :min="0" 
              placeholder="请输入商品重量"
              step="0.1"
            ></el-input-number>
          </el-form-item>
          
          <el-form-item label="设置积分">
            <el-form-item 
              label="金币" 
              prop="gold" 
              style="display: inline-block; margin-right: 5px;"
            >
              <el-input-number 
                v-model="form.gold" 
                :min="0" 
                placeholder="0"
              ></el-input-number>
            </el-form-item>
            <el-form-item 
              label="成长值" 
              prop="growthValue" 
              style="display: inline-block; "
            >
              <el-input-number 
                v-model="form.growthValue" 
                :min="0" 
                placeholder="0"
              ></el-input-number>
            </el-form-item>
          </el-form-item>
          
          <el-form-item label="商品介绍" prop="goodsIntro">
            <el-input 
              type="textarea" 
              v-model="form.goodsIntro" 
              rows="4"
              placeholder="请输入商品详细介绍"
            ></el-input>
          </el-form-item>

          <!-- 商品介绍图片上传 -->
          <el-form-item label="商品介绍图片">
            <el-upload
              action="#" 
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="formIntroImgList"
              :auto-upload="false"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <!-- 商品图集 -->
          <el-form-item label="商品图集">
            <el-upload
              action="#" 
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="formGalleryImgList"
              :auto-upload="false"
              list-type="picture-card"
              multiple
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤2：规格参数 -->
      <div v-if="active === 1">
        <el-form 
          :model="specForm" 
          label-width="120px"
          ref="specFormRef"
        >
          <el-form-item label="规格参数设置">
            <el-button type="primary" size="mini" @click="addSpec">+ 添加规格</el-button>
            <el-table :data="specForm.specList" border style="margin-top: 15px;">
              <el-table-column prop="name" label="规格名称" width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="请输入规格名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value" label="规格值" min-width="300">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" placeholder="多个值用逗号分隔"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button 
                    type="danger" 
                    size="mini" 
                    @click="removeSpec(scope.$index)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤3：销售属性 -->
      <div v-if="active === 2">
        <el-form 
          :model="saleAttrForm" 
          label-width="120px"
          ref="saleAttrFormRef"
        >
          <el-form-item label="销售属性设置">
            <el-button type="primary" size="mini" @click="addSaleAttr">+ 添加属性</el-button>
            <el-table :data="saleAttrForm.attrList" border style="margin-top: 15px;">
              <el-table-column prop="name" label="属性名称" width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="请输入属性名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value" label="属性值" min-width="300">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" placeholder="多个值用逗号分隔"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button 
                    type="danger" 
                    size="mini" 
                    @click="removeSaleAttr(scope.$index)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤4：SKU信息 -->
      <div v-if="active === 3">
        <el-form 
          :model="skuForm" 
          label-width="120px"
          ref="skuFormRef"
        >
          <el-form-item label="SKU列表">
            <el-table :data="skuForm.skuList" border>
              <el-table-column prop="spec" label="规格组合" min-width="200"></el-table-column>
              <el-table-column prop="price" label="销售价(元)">
                <template slot-scope="scope">
                  <el-input-number 
                    v-model="scope.row.price" 
                    :min="0" 
                    step="0.01"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="marketPrice" label="市场价(元)">
                <template slot-scope="scope">
                  <el-input-number 
                    v-model="scope.row.marketPrice" 
                    :min="0" 
                    step="0.01"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="库存数量">
                <template slot-scope="scope">
                  <el-input-number 
                    v-model="scope.row.stock" 
                    :min="0"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="SKU编码">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.code"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤5：完成页 -->
      <div v-if="active === 4" class="complete-container">
        <div class="complete-icon">
          <i class="el-icon-success"></i>
        </div>
        <h2>商品信息已完善完成！</h2>
        <p>您已成功完成所有商品信息的设置</p>
        <el-button type="primary" @click="submitAll">提交保存</el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="button-group" v-if="active < 4">
        <el-button 
          v-if="active > 0" 
          @click="prevStep"
        >
          上一步
        </el-button>
        <el-button 
          type="primary" 
          @click="nextStep"
        >
          {{ active === 3 ? '完成' : '下一步' }}
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "SpuInfo",
  data() {
    return {
      // 步骤导航相关
      active: 0,
      
      // 基本信息表单数据
      form: {
        goodsName: '',
        goodsDesc: '',
        category: '',
        brand: '',
        weight: 0,
        gold: 0,
        growthValue: 0,
        goodsIntro: ''
      },
      
      // 商品图片列表
      formIntroImgList: [],
      formGalleryImgList: [],
      
      // 规格参数表单
      specForm: {
        specList: [
          { name: '颜色', value: '红色,蓝色,黑色' },
          { name: '尺寸', value: '16G,32G,64G' }
        ]
      },
      
      // 销售属性表单
      saleAttrForm: {
        attrList: [
          { name: '套餐', value: '官方标配,套餐一,套餐二' }
        ]
      },
      
      // SKU表单
      skuForm: {
        skuList: [
          { 
            spec: '红色-16G', 
            price: 0, 
            marketPrice: 0, 
            stock: 0, 
            code: '' 
          },
          { 
            spec: '红色-32G', 
            price: 0, 
            marketPrice: 0, 
            stock: 0, 
            code: '' 
          }
        ]
      },
      
      // 表单验证规则
      rules: {
        goodsName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        brand: [
          { required: true, message: '请选择商品品牌', trigger: 'change' }
        ]
      },
      
      // 分类选项数据
      categories: [
        { value: 'phone', label: '手机' },
        { value: 'computer', label: '电脑' },
        { value: 'accessory', label: '配件' },
        { value: 'household', label: '家电' }
      ],
      
      // 品牌选项数据
      brands: [
        { id: 1, name: '华为' },
        { id: 2, name: '苹果' },
        { id: 3, name: '小米' },
        { id: 4, name: 'OPPO' }
      ]
    };
  },
  methods: {
    // 下一步
    nextStep() {
      // 验证当前步骤表单
      if (this.active === 0) {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            this.active++;
          } else {
            this.$message.error('请完善基本信息');
            return false;
          }
        });
      } else if (this.active === 1) {
        if (this.specForm.specList.length === 0) {
          this.$message.error('请至少添加一个规格参数');
          return;
        }
        this.active++;
      } else if (this.active === 2) {
        if (this.saleAttrForm.attrList.length === 0) {
          this.$message.error('请至少添加一个销售属性');
          return;
        }
        this.active++;
      } else if (this.active === 3) {
        this.active++;
      }
    },
    
    // 上一步
    prevStep() {
      if (this.active > 0) {
        this.active--;
      }
    },
    
    // 添加规格
    addSpec() {
      this.specForm.specList.push({
        name: '',
        value: ''
      });
    },
    
    // 移除规格
    removeSpec(index) {
      this.specForm.specList.splice(index, 1);
    },
    
    // 添加销售属性
    addSaleAttr() {
      this.saleAttrForm.attrList.push({
        name: '',
        value: ''
      });
    },
    
    // 移除销售属性
    removeSaleAttr(index) {
      this.saleAttrForm.attrList.splice(index, 1);
    },
    
    // 图片预览
    handlePreview(file) {
      console.log('预览文件：', file);
    },

    // 移除图片
    handleRemove(file, fileList) {
      console.log('移除的文件：', file);
    },
    
    // 提交所有数据
    submitAll() {
      // 整合所有表单数据
      const allData = {
        basicInfo: this.form,
        introImages: this.formIntroImgList,
        galleryImages: this.formGalleryImgList,
        specs: this.specForm.specList,
        saleAttrs: this.saleAttrForm.attrList,
        skus: this.skuForm.skuList
      };
      
      console.log('提交的所有商品数据：', allData);
      
      // 模拟提交成功
      this.$message.success('商品信息提交成功！');
      
      // 可以在这里添加路由跳转
      // this.$router.push('/goods/list');
    }
  }
};
</script>

<style scoped>
.app-container{
  margin: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.button-group {
  margin-top: 30px;
  text-align: right;
}

.button-group el-button {
  margin-left: 10px;
}

.complete-container {
  text-align: center;
  padding: 50px 0;
}

.complete-icon {
  font-size: 60px;
  color: #13ce66;
  margin-bottom: 20px;
}

.complete-container h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.complete-container p {
  color: #666;
  margin-bottom: 30px;
}
</style>
